import { Link ,useNavigate, Outlet} from 'react-router-dom';
// dipatch 发送派遣
import { useSelector , useDispatch } from 'react-redux'

import { createActionForUpdateVersion } from '../store/acions';
import { updateVersion } from '../store';
const List = ()=>{
    const navigate = useNavigate(); // 创建一个导航对象
    const dispatch = useDispatch(); // 创建出一个派发器

    const toUc = ()=>{
        navigate('/uc',{ state:{k:1,f:2}  });
    }
    const toUcRepalce = ()=>{
        //  navigate(跳转的页面的路径,{ 配置项 replace:是否替换跳转  })
        navigate('/uc',  { replace: true,} );
    }

    const toDetal = ()=>{
        navigate('/detail/我不想8点起来读书')
    }

    // 获取redux共享的状态
    const userInfo = useSelector(state=>state.userInfo)
    const version = useSelector(state=>state.version);
    const cart = useSelector(state=>state.cart)


    const handleClick= ()=>{ 

        // updateVersion() <=> { type:'updateVersion' }
        //  dispatch(createActionForUpdateVersion())

        dispatch(updateVersion())
        // dispatch({type:'updateVersion'})
    }

    return (
       <div>
             <div>我是list组件</div>
             <div> userinfo in the store: { JSON.stringify(userInfo) }  </div>    
             <div> version in the store: { version }  </div>
             <div> cart in the  store: { JSON.stringify(cart)  } </div>
             <Link to="/uc" replace> 用户中心 </Link>   
             <button onClick={ toUc  }> 
                通过navigate编程式导航跳转到 uc页面  
             </button> 
             <button onClick={ toUcRepalce  }> 
                通过navigate编程式导航跳转到 uc  replace 
             </button> 
             <hr />

             <button onClick={toDetal}>跳转到详情页</button>

             <Link to="/detail/你们说要起来读书的?a=1&b=2" state={ { c:1,d:true,e:[1,3,4] }}> 跳转到详情页 with query </Link>
            <div style={{ width:'600px',height:'400px',border:'1px solid red'}}>
                <Outlet />
            </div> 

            <hr />
            <button onClick={ handleClick}> 测一下disaptch</button>
       </div>

    
    )
}

export default List